<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:http="http://www.w3.org/1999/xhtml"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>Seaguller的小窝~</title>

    <link href="https://cdn.bootcss.com/amazeui/2.7.2/css/amazeui.min.css" rel="stylesheet">
    <link href="../static/css/main.css" rel="stylesheet" />
    <link rel="stylesheet" href="../static/markdown/css/editormd.css" />
    <link rel="stylesheet" href="../static/css/publish.css"/>
</head>
<body>

    <!-- 标题栏 -->
    <div class="head-one">
        <header class="am-topbar am-topbar-inverse am-topbar-fixed-top">
            <div class="am-container">
                <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse-4">
                    <ul class="am-nav am-nav-pills am-topbar-nav">
                        <a id="header-text" href="/">Seaguller的小窝~</a>
                        <li id="li-main">
                            <a href="/" class="header-a-main" id="header-a-main-one">
                                <span class="am-icon-home">&nbsp;首&nbsp;&nbsp;页</span>
                            </a>
                        </li>
                        <li id="li-archive"><a href="/archive" class="header-a-main" id="header-a-main-archive"><span class="am-icon-archive">&nbsp;归&nbsp;&nbsp;档</span></a></li>
                        <li id="li-update"><a href="/update" class="header-a-main" id="header-a-main-update"><span class="am-icon-calendar-plus-o">&nbsp;更&nbsp;&nbsp;新</span></a></li>
                        <li id="li-music"><a href="/music" class="header-a-main" id="header-a-main-music"><span class="am-icon-music">&nbsp;音乐馆</span></a></li>
                        <li id="li-message"><a href="/messageBoard" class="header-a-main" id="header-a-main-message"><span class="am-icon-pencil">&nbsp;留言板</span></a></li>
                        <li id="li-friends"><a href="/friends" class="header-a-main" id="header-a-main-friends"><span class="am-icon-mars">&nbsp;友&nbsp;&nbsp;链</span></a></li>
                        <li id="li-aboutMe"><a href="/aboutMe" class="header-a-main" id="header-a-main-aboutMe"><span class="am-icon-paper-plane-o">&nbsp;关于俺</span></a></li>
                    </ul>
                    <div class="am-btn-group login-button-head"  th:unless="${#httpServletRequest.remoteUser}">
                        <div class="am-dropdown" data-am-dropdown>
                            <button class="am-btn am-dropdown-toggle login-button" data-am-dropdown-toggle> <span class="am-icon-user login-icon"></span></button>
                            <ul class="am-dropdown-content login-content">
                                <li><a href="/login" class="login-content-a"><span class="am-icon-leaf">&nbsp;&nbsp;&nbsp;登录</span></a></li>
                                <li><a href="/register" class="login-content-a"><span class="am-icon-user-plus">&nbsp;&nbsp;&nbsp;注册</span></a></li>
                                <li><a class="login-content-a doc-prompt-toggle"><span class="am-icon-bug">&nbsp;&nbsp;&nbsp;反馈</span></a></li>
                            </ul>
                        </div>
                    </div>

                    <div class="am-btn-group login-button-head"  th:if="${#httpServletRequest.remoteUser}">
                        <div class="am-dropdown" data-am-dropdown id="login-sign-drop">
                            <button class="am-btn am-btn-secondary am-topbar-btn am-btn-sm am-dropdown-toggle" data-am-dropdown-toggle id="login-sign-name">
                                <span id="login-user-name"></span>
                                <span class="am-icon-caret-down"></span>
                            </button>
                            <ul class="am-dropdown-content login-content login-content-b" id="login-content-ul">
                                <li><a href="/user" class="login-content-a"><span class="am-icon-leaf">&nbsp;&nbsp;&nbsp;个人中心</span></a></li>
                                <li sec:authorize="hasAnyRole('ROLE_ADMIN')"><a href="/admin" class="login-content-a"><span class="am-icon-cog">&nbsp;&nbsp;&nbsp;管理中心</span></a></li>
                                <li><a class="login-content-a doc-prompt-toggle"><span class="am-icon-bug">&nbsp;&nbsp;&nbsp;反&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;馈</span></a></li>
                                <hr id="log-hr"/>
                                <li><a href="/logout" class="login-content-a"><span class="am-icon-sign-out">&nbsp;&nbsp;&nbsp;退出登录</span></a></li>
                            </ul>
                        </div>
                        <button class="am-btn" id="login-button-circle" sec:authorize="hasAnyRole('ROLE_ADMIN')"><span id="login-button-write">写</span></button>
                    </div>
                </div>
            </div>
        </header>
    </div>
    <!-- 反馈窗口 -->
    <div class="am-modal am-modal-prompt " tabindex="-1" id="my-prompt">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">反馈</div>
            <div class="am-modal-bd">
                你有什么要悄悄告诉我滴吗！(`・ω・´)
                <textarea maxlength="1000" id="feedback-text" style="resize:none;" class="am-modal-prompt-input private-conversation" placeholder="请填写您对本站的建议或者私下要对小弟说滴话~"></textarea>
                <br/>
                <textarea maxlength="50" style="resize:none;" id="feedback-contact" class="am-modal-prompt-input private-conversation-two" placeholder="方便留下您的联系方式咩？（选填）"></textarea>
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" id="feedback-submit" data-am-modal-confirm>提交</span>
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            </div>


        </div>
    </div>

    <div id="write-title">
        <input id="write-title-text" placeholder="请输入文章标题" size="100%" type="text">
        <button type="button" class="am-btn am-btn-danger am-round" id="write-title-button">发表文章</button>
    </div>

    <!-- 警告框 -->
    <div class="notice-box" >
        <i class="am-icon-exclamation-circle"></i>
        <span id="notice-box-text"></span>
    </div>

    <!-- 模态框 -->
    <div class="am-modal am-modal-alert" tabindex="-1" id="publish-article-modal">
        <div class="am-modal-dialog">
            <div class="am-modal-hd" id="modal-title">发布博客</div>
            <hr style="margin-top: -1px;"/>
            <div class="publish-modal-div">
                <span class="publish-modal-title">文章标签：</span>
                <div id="publish-modal-tags"></div>
            </div>
            <div class="publish-modal-tag-button-div">
                <button id="publish-tag-button">
                    <i class="am-icon-plus-circle"></i>&nbsp;添加标签
                </button>
                <div style="color: lightcoral;margin-right: 190px;">最多添加3个标签~</div>
            </div>
            <div class="publish-modal-div">
                <span class="publish-modal-title">文章类型：</span>
                <select id="publish-modal-classify">
                    <option selected="" value="choose">请选择</option>
                    <option value="原创">原创</option>
                    <option value="转载">转载</option>
                </select>
                <span class="publish-modal-required">*</span>
                <div id="publish-modal-required-div">
                    <span>文章分类：</span>
                    <select id="publish-modal-type">
                        <option selected="" value="choose">请选择</option>
                        <option value="心情窗">心情窗</option>
                        <option value="程序录">程序录</option>
                    </select>
                    <span class="publish-modal-required">*</span>
                </div>

            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" id="publish-modal-confirm" data-am-modal-confirm>发布</span>
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            </div>
        </div>
    </div>

    <div id="layout" class="editor">
        <div id="test-editormd">
            <textarea></textarea>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/amazeui/2.7.2/js/amazeui.min.js"></script>
    <script src="../static/markdown/editormd.min.js"></script>
    <!-- markdown -->
    <script type="text/javascript">
        var testEditor;
        testEditor = editormd("test-editormd", {
            placeholder:'欢迎来到Seaguller的创作小屋d(d＇∀＇)~',  //默认显示的文字，这里就不解释了
            width: "98%",
            height: 640,
            syncScrolling: "single",
            path: "../static/markdown/lib/",   //你的path路径（原资源文件中lib包在我们项目中所放的位置）
            saveHTMLToTextarea: true,
            emoji: false,
            taskList: true,
            tocm: true,         // Using [TOCM]
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
            toolbarIcons : function() {  // 自定义工具栏
                return editormd.toolbarModes['simple']; // full, simple, mini
            },
        });
    </script>

    <script src="https://cdn.bootcss.com/pagedown/1.0/Markdown.Converter.min.js"></script>
    <script src="https://cdn.bootcss.com/social-share.js/1.0.16/js/jquery.share.min.js"></script>
    <script src="../static/js/publish.js"></script>

    <!-- 反馈弹窗 -->
    <script type="text/javascript">
        $(function() {
            $('.doc-prompt-toggle').on('click', function() {
                $("#feedback-text").val("");
                $('#my-prompt').modal({
                    relatedTarget: this
                });
            });
        });
    </script>
</body>
</html>